<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>model</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-24 -->
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			// 获取tr的元素个数
			// alert($("tr").length);
			
			// 当执行了get之后得到的是一个js元素
			//$($("tr").get(1)).css("color","#f00");
			
			// 判断id为abc的tr在包装集中得位置
			// alert($("tr").index($("tr#abc")));
			
			// 在表达式中可以同逗号分隔多个包装集，但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
			// $("tbody tr:eq(2),tr#abc").css("color","#f00");
			
			/**
			 * 可以为包装集使用add方法，可以将新加入的元素添加到包装集中
			 */
			// $("tbody tr:eq(2)").add("thead tr td:eq(2)").add("tr td:contains('3')").css("color","#f00");
			
			// not方法可以将包装集中的元素取消掉
			// $("tr").not("tr#abc").css("color","#f00");
			
			// 过滤后，获取tr中位置小于3的元素
			// $("tr").filter("tr:lt(3)").css("color","#f00");
			
			// 获取tr中1-3形成一个新的包装集，返回的值就是新的包装集
			// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
			
			// 从包装集内部中获取相应的元素，返回值也是新包装集
			// $("table").find("tr#abc").css("color","#f00");
			
			// is表示的是当前的包装集中是否有某个元素，$("table")的包装集中只有一个元素table，所以没有td
			// alert($("td").is("td:contains('用户')"));
			
			// 获取tbody中得所有元素位置大于3的值得tr子元素，返回的是新包装集
			// $("tbody").children("tr:gt(2)").css("color","#f00");
			
			// 找到下一个元素，只是一个元素，返回新包装集
			// $("tr#abc").next().css("color","#0f0");
			
			// 找到下一组兄弟元素，是所有元素，返回新包装集
			// $("tr#abc").nextAll().css("color","#0f0");
			
			// parent仅仅只是返回上一级的div，返回新包装集
			// $("#s1").parent("div").css("color","#0f0");
			
			// 返回所有满足条件的父类节点，返回新包装集
			// $("#s1").parents("div").css("color","#0f0");
			
			// 返回第3个tr的所有兄弟节点，返回新包装集
			var a = $("tr:eq(2)").siblings("tr").css("color","#0f0").is("tr#abc");
			alert(a);
		});
	</script> 
</head>
<body>
	<div id="d1">
		cdd
		<div>
			<span id="s1">abc</span>
		</div>
	</div>
	<table width="700" border="1" align="center">
		<thead>
			<tr>
				<td>用户标识</td>
				<td>用户姓名</td>
				<td>用户年龄</td>
				<td>用户密码</td>
			</tr>
		</thead>
		<tbody>
			<tr id="abc">
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>33</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>13</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>45</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>5</td>
				<td>朱七</td>
				<td>21</td>
				<td>abc123</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

